<template>
	<sl-page navbarBackgroundColor="#FF7557" navbarBackImageColor="#fff">
		<!-- 搜索 -->
		<!-- <view slot="top" class="search-input-wrapper">
			<uni-easyinput prefixIcon="search" confirmType="search" maxlength=20 :clearable="false" :inputBorder="false"
				v-model="searchValue" :styles="styles" placeholder="请输入关键字搜素..." :placeholderStyle="placeholderStyle" @confirm="onSearch">
			</uni-easyinput>
		</view> -->
		<view class="tenantGoods" v-if="!isLoading">
			<TenantHead :tenant="tenant" thmeStyle="tenantHeadOrangered"></TenantHead>
			<Sort :sortDatas="sortDatas" @sort:click="handleSortType"></Sort>
			<z-paging ref="paging" :paging-style="{'margin-top': '480rpx'}" v-model="goodsList" @query="loadPage">
				<view class="page-goods">
					<Goods ref="goods" :gridDatas="goodsList" />
				</view>
			</z-paging>
		</view>
	</sl-page>
</template>

<script>
	import TenantApi from '@/api/tenant/tenant.js';
	import GoodsApi from '@/api/goods/goods.js';
	import Constants from '@/constants';
	import TenantHead from '@/pages/components/head/tenantHead.vue';
	import Sort from '@/pages/components/sort/sort.vue';
	import Goods from '@/pages/components/goods/goods.vue';

	export default {
		name: 'tenantGoods',
		//
		mixins: [Constants],
		//
		components: {
			TenantHead,
			Sort,
			Goods,
		},
		//
		data() {
			return {
				goodsList: [],
				height: '',
				//正在加载
				isLoading: true,
				//页面参数
				options: {},
				//店铺Id
				tenantId: '',
				//店铺
				operateTenantName: '',
				tenant: {},
				//查询参数
				query: {},
				//是否订阅
				isFollow: false,
				sortDatas: [{
					isSort: false,
					sortField: 'newFlag',
					sortName: '新品'
				}, {
					isSort: false,
					sortField: 'sales',
					sortName: '销量'
				}, {
					isSort: false,
					sortField: 'price',
					sortName: '价格'
				}],
				//排序
				orderBy: [],
				//查询框扩展
				styles: {
					// color: '#2979FF',
					// borderColor: '#ff0b17',
				},
				searchValue: '',
				placeholderStyle: 'color:##A6A6A6;font-size:28rpx',
			};
		},
		//
		onLoad(options) {
			this.options = options;
			//店铺Id
			this.initPara();
			//加载页面数据
			this.onRefreshPage();
			// this.$refs.paging.reload();
		},
		//
		methods: {
			onSearch() {

			},
			//
			loadPage: async function() {
				try {
					console.log('this.query: ', this.query);
					console.log('this.query: ', this.param);
					const res = await GoodsApi.query(this.query, this.param);
					console.log('res.obj:', res.obj);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error(error);
					this.$refs.paging.complete(false);
				}
			},
			//
			initPara() {
				const {
					options
				} = this;
				this.tenantId = options.tenantId || '';
				this.query.tenantId = this.tenantId;
			},
			//
			async onRefreshPage() {
				const {
					getTenant,
				} = this;
				this.isLoading = true;
				try {
					const [tenantResult] = await Promise.all([

						getTenant(),

					]);
					// do something with the results
				} catch (err) {
					console.log('catch', err);
				} finally {
					this.isLoading = false;
				}
			},
			//切换排序方式
			handleSortType(item) {
				//this.reset();
				this.dohandleSortType(item);
				this.loadPage();
			},
			//
			dohandleSortType(item) {
				const {
					orderBy
				} = this;
				const options = {
					newFlag: 'newFlag:desc',
					sales: 'sales:desc',
					price: 'price:desc'
				};
				if (item) {
					if (item.sortField && item.isSort && options[item.sortField]) {
						orderBy.push(options[item.sortField]);
					} else {
						this.orderBy = orderBy.filter(order => {
							const [key] = order.split(':');
							return key !== item.sortField;
						});
					}
					this.param.orderBy = orderBy.join(';');
				}
			},
			//
			// loadPage: async function() {
			// 	const {
			// 		query,
			// 		param
			// 	} = this;
			// 	let res = await GoodsApi.query_tenant(query, param);
			// 	return res.obj || {};
			// },
			//得到店铺明细
			getTenant: async function() {
				const {
					tenantId
				} = this;
				let res = await TenantApi.get(tenantId);
				this.tenant = res.obj;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.search-input-wrapper {

		display: flex;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding-left: 20rpx;
		border-radius: 80rpx;
	}

	.tenantGoods {}

	.page-goods {
		margin-top: 15rpx;
		background: $uni-bg-color-grey;
		padding: 12rpx 32rpx;
	}
</style>